<template>
  <div class="detail">
    <IndexHeader></IndexHeader>
    <div class="p-book row">
      <div class="left column">
        <div class="hotelAndRoomInfo column">
          <div class="title row">
            <span class="name">{{ item.compName }}</span>
            <div class="star center">
              <i
                class="el-icon-star-on colorchen"
                v-for="star of 4"
                :key="star"
              ></i>
            </div>
          </div>
          <div class="address row">
            <i class="el-icon-guide font16"></i>
            <div class="text">{{ item.category }}</div>
          </div>
          <div class="address row">
            <i class="el-icon-user font16"></i>
            <div class="text">{{ item.sponsor }}老师</div>
          </div>
          <div class="roomName">{{ item.schoolName }}</div>
          <div class="facility row">
            <div class="item row center">
              <i class="icon el-icon-time"></i>
              <div class="text">
                比赛时间：{{ item.dateTime | filterTime1 }} {{ " " }}至{{ " "
                }}{{ item.dateTime | filterTime2 }}
              </div>
            </div>
            <div class="moreFacilityBtn" @click="scrollTo()">我要报名</div>
          </div>
          <div class="divide"></div>
          <div class="bookNotice column">
            <div class="title">参赛要求</div>
            <div class="item row">
              <i class="icon el-icon-warning-outline"></i>
              <span class="text"
                >参赛对象为四川各高校全日制专科生、本科生、研究生（不含在职）。
              </span>
            </div>
            <div class="item row">
              <i class="icon el-icon-warning-outline"></i>
              <span class="text"
                >各院校自行组队，每个团队由3-5名选手及1名指导教师组成，原则上不跨校组队。团队成员原则上财经类专业同学不超过两人（专业说明见附件1），每位同学只允许参加一个团队，指导老师必须是参赛队所属院校在职教师。
              </span>
            </div>
            <div class="item row">
              <i class="icon el-icon-warning-outline"></i>
              <span class="text"
                >正式报名后选手因故无法参加比赛，需所在院校出具书面说明，并经组委会同意后方可更换，大赛开始后不得更换选手。</span
              >
            </div>
          </div>
          <div class="divide"></div>
          <ul class="courage">
            <li class="item">赛程紧张，请尽快报名！</li>
            <li class="item">报名成功后请留意官方信息</li>
          </ul>
          <div class="divide"></div>
          <div v-html="item.content"></div>
        </div>
        <div class="guestInfo column">
          <div class="divide"></div>
          <h3 class="m-guestInfo_title">填写报名资料</h3>
          <div class="m-guestInfo_remark">
            请按实际个人信息填写，姓名与证件保持一致<i
              class="u-icon-ic_new_info_line el-icon-warning-outline"
            ></i>
          </div>
          <div class="guest column">
            <div class="guestLable"><span>姓名</span></div>
            <div class="m-inputBox_label">请输入姓名</div>
            <el-input v-model="userName" placeholder="姓名"></el-input>
            <div class="guestLable"><span>学号</span></div>
            <div class="m-inputBox_label">请输入学号（必填）</div>
            <el-input v-model="stuNumber" placeholder="学号"></el-input>
            <div class="guestLable"><span>电话</span></div>
            <div class="m-inputBox_label">请输入电话号码</div>
            <el-input v-model="tel" placeholder="电话"></el-input>
            <div class="guestLable"><span>学校</span></div>
            <div class="m-inputBox_label">请选择学校</div>
            <!-- <el-input v-model="tel" placeholder="学校"></el-input> -->
            <el-select v-model="schoolName" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="payment row between">
          <div class="row center" style="padding-right: 80px">
            <!-- <span class="payment_content">在线付</span>
            <span class="price">￥{{ "currentRoom.price * dayNum - 31" }}</span> -->
          </div>
          <div class="payment_button" @click="beforeSubmit">提交</div>
        </div>
      </div>
      <div class="right column">
        <div class="sideSticky">
          <div class="subPrice column center">
            <div class="priceLable font14 gray">已报名人数</div>
            <div class="priceLable font28 bold">123123人</div>
          </div>
          <div class="divide"></div>
          <div class="title-encourage">比赛公告</div>
          <el-timeline>
            <el-timeline-item timestamp="2018/4/12" placement="top">
              <el-card>
                <h4>
                  关于延期举办首届“五粮液杯” 四川省大学生酒类创新创意大赛的通知
                </h4>
                <p>2018/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/3" placement="top">
              <el-card>
                <h4>四川省大学生酒类创新创意大赛</h4>
                <p>2018/4/3 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>

    <!-- 提交二维码 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeSub"
    >
      <el-image
        style="width: 200px; height: 200px; margin-left: 150px"
        :src="url"
        :fit="'cover'"
      ></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <BottomBar></BottomBar>
  </div>
</template>

<script>
import userApi from "@/api/user";
import competitionApi from "@/api/competition";
import IndexHeader from "@/components/IndexHeader";
import BottomBar from "@/components/BottomBar";
export default {
  name: "detail",
  components: {
    IndexHeader,
    BottomBar,
  },
  data() {
    return {
      //竞赛信息
      item: null,
      //填写资料
      userName: "",
      stuNumber: "",
      tel: "",
      schoolName: "",
      // 学校选择
      options: [],

      dayNum: 1,
      dialogVisible: false,
      url: require("@/assets/img/er.jpg"),
    };
  },
  filters: {
    filterTime1(list) {
      return list.split(",")[0];
    },
    filterTime2(list) {
      return list.split(",")[1];
    },
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  created() {
    this.item = this.$route.params.item;
    this.getAllSchool();
  },
  methods: {
    getAllSchool() {
      userApi.getAllSchool().then((res) => {
        var data = res.data.data;
        this.options = data.map((school) => {
          return { value: school.schoolId, label: school.schoolName };
        });
      });
    },
    beforeSubmit() {
      console.log(!this.userName);
      if (!this.userName) {
        this.$alert("请输入姓名", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (!this.stuNumber) {
        this.$alert("请输入入学号信息", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (!this.tel) {
        this.$alert("请输入电话号码", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (!this.schoolName) {
        this.$alert("请选择所属学校", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        // 进行支付操作
        this.dialogVisible = true;
      }
    },
    closeSub() {
      this.$message({
        type: "info",
        message: "已取消支付",
      });
    },
    submit() {
      this.$confirm("此操作将提交支付, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var formData = new FormData();
          //order表属性
          formData.append("userName", this.userName);
          formData.append("stuNumber", this.stuNumber);
          formData.append("RegTel", this.tel);
          formData.append("RegSchoolName", this.schoolName);
          formData.append("compId", this.item.compId);
          competitionApi.submit(formData).then((res) => {
            var data = res.data;
            console.log("提交返回：", data);
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "报名成功!",
              });
              this.dialogVisible = false;
              this.userName = "";
              this.stuNumber = "";
              this.tel = "";
              this.schoolName = "";
            } else {
              this.dialogVisible = false;
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },
    scrollTo() {
      var h =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      window.scrollTo(h, h);
    },
  },
};
</script>

<style scoped>
.detail {
  min-height: 100%;
  background-color: #f7f7f7;
}

.p-book {
  padding: 0 320px;
  margin-top: 16px;
}
/* 左侧css */
.left {
  /* background-color: #fff; */
  width: 65%;
  box-sizing: border-box;
}
/* 左上侧信息旅店房间信息展示 */
.hotelAndRoomInfo {
  margin-right: 16px;
  background: #fff;
  padding: 24px;
  line-height: 1;
  margin-bottom: 8px;
}
.hotelAndRoomInfo .title .name {
  display: inline;
  color: #0f294d;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  margin-right: 13px;
  line-height: 1.4;
}
.hotelAndRoomInfo .title .star {
  font-size: 14px;
}
.hotelAndRoomInfo .address {
  align-items: center;
  margin-top: 8px;
}
.hotelAndRoomInfo .text {
  color: #0f294d;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 5px;
}
.hotelAndRoomInfo .roomName {
  color: #0f294d;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 16px;
}
.hotelAndRoomInfo .facility {
  margin-top: 8px;
}
.hotelAndRoomInfo .facility .item .icon {
  margin-right: 8px;
  font-size: 16px;
}
.hotelAndRoomInfo .facility .item .text {
  color: #0f294d;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
}
.hotelAndRoomInfo .moreFacilityBtn {
  margin-left: auto;
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  width: 80px;
  background-color: #287dfa;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}
.bookNotice {
}
.bookNotice {
  margin-top: 16px;
}
.hotelAndRoomInfo .bookNotice .title {
  margin-top: 8px;
  color: #0f294d;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}
.hotelAndRoomInfo .bookNotice .item {
  margin-top: 8px;
}
.hotelAndRoomInfo .bookNotice .item .icon {
  margin-right: 10px;
  font-size: 14px;
  color: #0f294d;
}
.hotelAndRoomInfo .bookNotice .item .text {
  color: #0f294d;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}
.hotelAndRoomInfo .courage {
  margin-top: 6px;
  margin-left: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-left: 25px;
}
.hotelAndRoomInfo .courage .item {
  margin-top: 10px;
  list-style: disc;
  color: #ff6f00;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
/* 左下侧个人信息填写 */
.guestInfo {
  margin-bottom: 8px;
  margin-right: 16px;
  padding: 24px;
  background: #fff;
}
.guestInfo .dateAndRoom {
}
.guestInfo .search-item-date {
  width: 48.3%;
  height: 76px;
  box-sizing: border-box;
  /* border: 1px solid #dadfe6; */
  position: relative;
}
.guestInfo .m-guestInfo_title {
  font-size: 20px;
  line-height: 26px;
  margin: 10px 0 0 0;
}
.guestInfo .m-guestInfo_remark {
  color: #8592a6;
  font-size: 14px;
  line-height: 18px;
  padding-top: 3px;
}
.guestInfo .u-icon-ic_new_info_line {
  cursor: pointer;
  margin-left: 5px;
  font-size: 16px;
}
.guest {
  margin-top: 24px;
  margin-bottom: 16px;
}
.guestLable {
  display: flex;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.m-inputBox_label {
  color: #455873;
  font-size: 14px;
  line-height: 18px;
}
.payment {
  margin-bottom: 8px;
  margin-right: 16px;
  padding: 24px;
  background: #fff;
  position: relative;
}
.payment_content {
  font-size: 14px;
}
.price {
  color: #287dfa;
  font-size: 24px;
  font-weight: 700;
}
.payment_button {
  background: #287dfa;
  padding: 16px 24px;
  height: auto;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
/* 右侧css */
.right {
  width: 32%;
}
.sideSticky {
  padding-bottom: 16px;
  padding: 24px;
  background-color: #fff;
}
.subPrice {
  margin-bottom: 8px;
}
.priceLable {
  margin: 15px 0;
}
.summer {
  font-size: 24px;
  color: #0f294d;
  line-height: 30px;
  font-weight: 700;
}
.priceCell {
  font-size: 24px;
  color: #287dfa;
  font-weight: 700;
}
.title-encourage {
  color: #06aebd;
  font-weight: 700;
  line-height: 18px;
  margin-top: 16px;
}
.sideSticky .content {
  color: #8592a6;
  margin-top: 8px;
  line-height: 21px;
}
.a {
  font-weight: 700;
  line-height: 18px;
  margin-top: 16px;
}
/* 更改输入框的样式 */
.input-title {
  height: 28px;
}
.input-title span {
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 11;
  font-size: 14px;
  color: #8592a6;
}
::v-deep .p-book .el-input__inner {
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  height: 46px;
  line-height: 46px;
  font-weight: 700;
  font-size: 16px;
  color: #0f294d !important;
  line-height: 22px;
  padding: 0 0px;
  z-index: 10;
}
::v-deep .p-book .el-input__inner:focus {
  border-bottom: 2px solid #2681ff;
}
::v-deep .p-book .el-input__inner::-webkit-input-placeholder {
  /* color: #8592a6;
  font-size: 13px; */
}
/* 时间选择样式修改 */
::v-deep .p-book .el-date-editor .el-range-input {
  color: #0f294d;
  font-weight: 700;
  font-size: 16px;
}
::v-deep .p-book .el-range-editor.el-input__inner {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  box-sizing: border-box;
}
</style>